<template>
  <div class="top-header">
    <div class="header-left">
      <img :src="topList.coverImgUrl" alt="" />
    </div>
    <!-- 头部右 -->
    <div class="header-right">
      <!-- 标题 -->
      <h2>{{topList.name}}</h2>
      <!-- 更新时间 -->
      <div>
        <div class="icon"></div>
        <span style="color: #666; font-size: 12px">最近更新：{{topList.updateTime | dataFormat1}}</span>
        <span style="color: #999; font-size: 12px; margin-left: 5px">({{topList.updateFrequency}})</span>
      </div>
      <!-- 3 -->
      <div class="right-header3">
        <div class="playbutton">
          <div class="play" @click="playList()">播放</div>
          <div class="addplay"></div>
        </div>

        <div class="add" @click="add">
          <i>
            ({{ topList.subscribedCount }})
          </i>
          
        </div>

        <div class="share" @click="share">
          <i>
                ({{ topList.shareCount }})
          </i>
          
        </div>

        <div class="down" @click="down">下载</div>

        <div class="speak" @click="speak">
          <i>
           ({{ topList.commentCount }})
          </i>
          
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getSongURL} from '@/api/api.js'
export default {
  props: {
    topList: {
      type: Object,
      default() {
        return {}
      }
    },
    // topData: {
    //   type: Array,
    //   default() {
    //     return []
    //   }
    // }
  },
  created() {
    console.log(this.topList);
  },
  methods: {
    // 播放
    playList() {
     let songList = []
      for(let item of this.topList.trackIds.slice(0,10)) {
          getSongURL(item.id).then(res => {
            songList.push(res.data[0].url)
          })
      }
      console.log(songList);
      this.$store.commit("savaSongURL", []);
      this.$store.commit("savaSongURL", songList);
    },
    // 点击添加
    add() {
      const tokenkey = window.sessionStorage.getItem("token") ||  window.sessionStorage.getItem("cookie");
      if (!tokenkey) {
        this.$message.warning("请先登录");
        this.$store.commit("editIsShow");
      }
    },
    // 点击分享
    share() {
      const tokenkey = window.sessionStorage.getItem("token") ||  window.sessionStorage.getItem("cookie");
      if (!tokenkey) {
        this.$message.warning("请先登录");
        this.$store.commit("editIsShow");
      }
    },
    // 点击下载
    down() {
      const tokenkey = window.sessionStorage.getItem("token") ||  window.sessionStorage.getItem("cookie");
      if (!tokenkey) {
        this.$message.warning("请先登录");
        this.$store.commit("editIsShow");
      }
    },
    // 点击评论
    speak() {
      const tokenkey = window.sessionStorage.getItem("token") ||  window.sessionStorage.getItem("cookie");
      if (!tokenkey) {
        this.$message.warning("请先登录");
        this.$store.commit("editIsShow");
      }
    },
  }
};
</script>

<style lang="scss" scoped>

.play,
.addplay,
.add,
.share,
.down,
.speak,
.button {
  
  background: url("https://s2.music.126.net/style/web2/img/button2.png?3b1af8779cab6a84196c071d5a3f4343")
    no-repeat 0 9999px;
}

.top-header {
  width: 100%;
  height: 238px;
  padding: 40px;
  display: flex;
  justify-content: space-between;
  .header-left {
    width: 158px;
    height: 158px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    img {
      display: block;
      width: 150px;
      height: 150px;
      
    }
  }
  .header-right {
    width: 473px;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    h2 {
      font-size: 20px;
      font-weight: normal;
    }
    .right-header3 {
            display: flex;
            margin: 10px 0;
            .playbutton {
              width: 98px;
              height: 31px;
              display: flex;
              .play {
                width: 66px;
                height: 31px;
                color: #fff;
                background-position: right -387px;
                border-radius: 3px 0 0 3px;
                text-align: center;
                line-height: 31px;

                &:hover {
                  background-position: right -469px;
                  cursor: pointer;
                }
              }
              .addplay {
                width: 31px;
                height: 31px;
                background-position: 0 -1588px;
                &:hover {
                  background-position: -40px -1588px;
                  cursor: pointer;
                }
              }
            }
            .add {
              margin-left: 10px;
              width: 88px;
              height: 31px;
              background-position: 0 -977px;
              border-right: 1px solid #ccc;
              // background-position:  right -1020px;
              padding-left: 28px;
              line-height: 31px;
              &:hover {
                background-position: 0 -1063px;
                cursor: pointer;
              }
            }
            .share {
              margin-left: 10px;
              width: 69px;
              height: 31px;
              background-position: 0 -1225px;
              border-right: 1px solid #ccc;
              border-radius: 0 3px 3px 0;
              text-align: center;
              line-height: 31px;
              padding-left: 20px;
              &:hover {
                cursor: pointer;
                background-position: 0 -1268px;
              }
            }
            .down {
              margin-left: 10px;
              width: 59px;
              height: 31px;
              background-position: 0 -2761px;
              border-right: 1px solid #ccc;
              border-radius: 0 3px 3px 0;
              text-align: center;
              line-height: 31px;
              padding-left: 20px;
              &:hover {
                cursor: pointer;
                background-position: 0 -2805px;
              }
            }
            .speak {
              
              margin-left: 10px;
              width: 70px;
              height: 31px;
              background-position: -0 -1465px;
              border-right: 1px solid #ccc;
              border-radius: 0 3px 3px 0;
              text-align: center;
              line-height: 31px;
              padding-left: 20px;
              &:hover {
                cursor: pointer;
                background-position: 0 -1508px;
              }
            }
          }
  }
  
}
</style>